<!-- 旅游会员订单详情 -->
<template>
  <div class="travel_order_details">
    <el-container class="base_details_container">
      <BackTitleView v-if="typeKey === 'after'" :title="`售后详情-${data.afterSaleItem.afterSaleStatusName}`" />
      <BackTitleView v-else :title="`订单详情-${data.orderItem.orderStatusStr}`" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title">基本信息</div>
            <div class="base_details_content_second">
              <el-descriptions>
                <el-descriptions-item label="订单编号：">{{
                  data.orderItem.orderCode
                }}</el-descriptions-item>
                <el-descriptions-item label="归属基地：">{{
                  data.orderItem.shopName
                }}</el-descriptions-item>
                <el-descriptions-item label="下单时间：">{{
                  data.orderItem.createTime
                }}</el-descriptions-item>
                <el-descriptions-item label="付款时间：">{{
                  data.orderItem.payTime
                }}</el-descriptions-item>
                <el-descriptions-item label="活动优惠：">-¥{{ data.orderItem.discountMoney }}</el-descriptions-item>
                <el-descriptions-item label="储值支付：">-¥{{ data.orderItem.depositMoney }}</el-descriptions-item>
                <el-descriptions-item label="实付金额：">¥{{ data.orderItem.dueMoney }}</el-descriptions-item>
                <el-descriptions-item v-if="data.orderItem.agentMemberName" label="分销员：">{{ data.orderItem.agentMemberName
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="base_details_title">预定人信息</div>
            <div class="base_details_content_second">
              <el-descriptions>
                <!-- <el-descriptions-item label="出行人数："></el-descriptions-item> -->
                <el-descriptions-item label="出行日期：">{{
                  data.orderItem.travelDate
                }}</el-descriptions-item>
                <!-- <el-descriptions-item label="返程日期："></el-descriptions-item> -->
              </el-descriptions>
              <el-table :data="data.guestItemList">
                <el-table-column label="联系电话" prop="phoneNumber" align="center" />
                <el-table-column label="预订人" prop="guestName" align="center" />
                <el-table-column label="联系电话" prop="phoneNumber" align="center" />
                <el-table-column label="身份证" prop="identityCardNumber" align="center" />
                <el-table-column label="拼房人" prop="sharedRoom" align="center" />
              </el-table>
            </div>
            <div v-if="data.addressItem.recipientName" class="base_details_title">
              收货人信息
            </div>
            <div v-if="data.addressItem.recipientName" class="base_details_content_second">
              <el-descriptions>
                <el-descriptions-item label="收货人：">{{
                  data.addressItem.recipientName
                }}</el-descriptions-item>
                <el-descriptions-item label="联系电话：">{{
                  data.addressItem.phoneNumber
                }}</el-descriptions-item>
                <el-descriptions-item label="收货地址：">{{
                  data.addressItem.addressFull
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <!-- <span>{{ data.express.expressDetail }}</span> -->
            <div v-if="data.express" class="base_details_title">发货信息</div>
            <div v-if="data.express" class="base_details_content_second">
              <span style="white-space: pre-line; color: #606266">{{
                data.express.expressDetail
              }}</span>
              <!-- <el-descriptions>
                <el-descriptions-item label="快递名称：">{{ data.express.expressName }}</el-descriptions-item>
                <el-descriptions-item label="快递单号：">{{ data.express.expressNo }}</el-descriptions-item>
                </el-descriptions> -->
            </div>
            <div v-if="statusTitle == '已取消'" class="base_details_title">
              取消原因
            </div>
            <div v-if="statusTitle == '已取消'" class="base_details_content_second">
              {{ data.orderItem.cancelReason }}
            </div>
            <div class="base_details_title">产品信息</div>
            <div class="base_details_content_second">
              <el-table :data="data.packageList">
                <el-table-column label="产品图片" width="100" align="center">
                  <template #default="scope">
                    <img :src="scope.row.mainPic" :style="{
                      width: '75px',
                      height: '75px',
                    }" />
                  </template>
                </el-table-column>
                <el-table-column label="产品名称" prop="travelName" align="center" />
                <el-table-column label="套餐名称" prop="packageName" align="center" />
                <el-table-column label="产品编码" prop="travelCode" align="center" />
                <el-table-column label="价格" prop="duePrice" align="center" />
                <el-table-column label="购买数量" prop="sellNum" align="center" />
                <el-table-column label="小计" prop="totalDuePrice" align="center" />
              </el-table>
            </div>
            <div class="base_details_title">附加费用</div>
            <div class="base_details_content_second">
              <el-descriptions>
                <el-descriptions-item v-for="(item, index) in data.extraExpenseList" :key="index"
                  :label="`${item.extraName}：`">
                  ¥{{ item.extraPrice }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="base_details_title">优惠信息</div>
            <div class="base_details_content_second">
              <el-table :data="data.promotionList">
                <el-table-column label="优惠名称" prop="promotionName" align="center" />
                <el-table-column label="优惠金额" prop="promotionMoney" align="center" />
                <el-table-column label="优惠类型" align="center">
                  <!-- 1020001 优惠券、1020002 礼包兑换、1020003 优惠活动 -->
                  <template #default="scope">
                    <span v-if="scope.row.promotionType == '1020001'">优惠券</span>
                    <span v-else-if="scope.row.promotionType == '1020002'">礼包兑换</span>
                    <span v-else-if="scope.row.promotionType == '1020003'">优惠活动</span>
                    <span>-</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="typeKey === 'after'" class="base_details_title">
              售后信息
            </div>
            <div v-if="typeKey === 'after'" class="base_details_content_second">
              <el-descriptions>
                <el-descriptions-item label="售后编码：">{{
                  data.afterSaleItem.afterSaleCode
                }}</el-descriptions-item>
                <el-descriptions-item label="订单业务类型：">{{
                  data.afterSaleItem.mainBusiTypeName
                }}</el-descriptions-item>
                <el-descriptions-item label="售后类型：">{{
                  data.afterSaleItem.afterSaleTypeName
                }}</el-descriptions-item>
                <el-descriptions-item label="售后状态：">{{
                  data.afterSaleItem.afterSaleStatusName
                }}</el-descriptions-item>
                <el-descriptions-item label="售后原因类型：">{{
                  data.afterSaleItem.reasonType
                }}</el-descriptions-item>
                <el-descriptions-item v-if="data.afterSaleItem.reasonDesc" label="售后原因详情：">{{
                  data.afterSaleItem.reasonDesc }}</el-descriptions-item>
                <el-descriptions-item label="会员编号：">{{
                  data.afterSaleItem.memberCode
                }}</el-descriptions-item>
                <el-descriptions-item v-if="data.afterSaleItem.cancelInfo" label="售后取消原因：">{{
                  data.afterSaleItem.cancelInfo }}</el-descriptions-item>
                <el-descriptions-item label="退款金额：">¥{{ data.afterSaleItem.refundMoney }}</el-descriptions-item>
                <el-descriptions-item label="退还储值金额：">¥{{ data.afterSaleItem.depositMoney }}</el-descriptions-item>
                <el-descriptions-item v-if="data.afterSaleItem.expressName" label="退回快递公司：">{{
                  data.afterSaleItem.expressName }}</el-descriptions-item>
                <el-descriptions-item v-if="data.afterSaleItem.expressNo" label="退回快递单号：">{{ data.afterSaleItem.expressNo
                }}</el-descriptions-item>
                <el-descriptions-item label="创建时间：">{{
                  data.afterSaleItem.createTime
                }}</el-descriptions-item>
                <el-descriptions-item v-if="data.afterSaleItem.updateTime" label="更新时间：">{{ data.afterSaleItem.updateTime
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer v-if="typeKey === 'after'">
        <el-button v-if="data.afterSaleItem.afterSaleStatus === '1052001'" @click="confirmAfterSale"
          type="primary">确认退款</el-button>
        <el-button v-if="data.afterSaleItem.afterSaleStatus === '1052001'" @click="cancelAfterSale"
          type="primary">取消售后</el-button>
        <el-button v-if="data.afterSaleItem.afterSaleStatus === '1052005' ||
          data.afterSaleItem.afterSaleStatus === '1052006'
          " @click="confirmTakeOver" type="primary">确认收货</el-button>
        <el-button @click="back">关闭</el-button>
      </el-footer>
      <el-footer v-else>
        <!-- <el-button @click="acceptOrder" type="primary">二次已确认</el-button> -->
        <el-button v-if="!readOnly && data.orderItem.isDeliver == 1" @click="shipments" type="primary">发货</el-button>
        <el-button v-if="!readOnly && (statusTitle == '未付款' || statusTitle == '处理中')
          " @click="cancelOrder">取消订单</el-button>
        <el-button @click="back">关闭</el-button>
      </el-footer>
    </el-container>
    <OrderShipments ref="shipmentsRef" @shipments="getShipments"></OrderShipments>
    <CancelOrder ref="cancelOrderRef" @cancelOrder="getCancelOrder"></CancelOrder>
    <CancelAfterSale ref="cancelAfterSaleRef" @cancelAfterSale="getCancelAfterSale"></CancelAfterSale>
    <ConfirmAfterSale ref="confirmAfterSaleRef" :desc="expenseAftersale" :money="refundMoney"
      @submit="confirmAfterSaleSubmit" />
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import { ref, reactive } from 'vue';
import { $msg, $box } from "@ui/msg";
import useRoute from "@util/router";
import OrderShipments from "@com/order/OrderShipments.vue";
import CancelOrder from "@com/order/CancelOrder.vue";
import CancelAfterSale from "@com/order/CancelAfterSale.vue";
import ConfirmAfterSale from "@com/order/ConfirmAfterSale.vue";
import $ from "@util/base";
import api from "@api/order";
import afterApi from "@api/afterSaleOrder";

const route = useRoute();
const urlQuery = route.query();
const typeKey = urlQuery.type;
var readOnly = false;

$.handleCRU(urlQuery.type, {
  show: () => {
    readOnly = true;
  },
});

const data = ref({
  orderItem: {}, // 订单信息
  guestItemList: [{}], // 预订人信息
  addressItem: {}, // 收货人信息
  packageList: [], // 套餐列表(产品信息)
  promotionList: [], // 优惠列表
  groupItem: {}, // 拼团信息
  afterSaleItem: {}, // 售后信息
});
const expenseAftersale = ref(null)
const refundMoney = ref(null)
getData();
function getData() {
  api.detail("travel", urlQuery.code, urlQuery.afterSaleCode, (val) => {
    if ($.isNotEmpty(val.afterSaleItems)) {
      val.afterSaleItem = val.afterSaleItems[0];
      refundMoney.value = val.afterSaleItem.refundMoney
    }
    expenseAftersale.value = val.orderItem.expenseAftersale

    if (val != null && val.guestItemList != null && val.guestItemList.length > 0) {
      val.guestItemList.map(e => {
        if (e.sharedRoomFlag == 1) {
          e.sharedRoom = "是"
        } else {
          e.sharedRoom = "否"
        }
        return e
      })
    }
    data.value = val;

    getConfig(val.orderItem.orderStatus);
  });
}

let statusTitle = ref("已完成");
// 1022001 未付款、1022002 处理中、1022003 已取消、1022004 未出行、1022005 已完成
function getConfig(status) {
  switch (status) {
    case "1022001":
      statusTitle.value = "未付款";
      break;
    case "1022002":
      statusTitle.value = "处理中";
      break;
    case "1022003":
      statusTitle.value = "已取消";
      break;
    case "1022004":
      statusTitle.value = "未出行";
      break;
    case "1022005":
      statusTitle.value = "已完成";
      break;
  }
}

// function acceptOrder() {
//   $box.open("二次已确认", "是否二次已确认？", () => {
//     api.confirm('travel', urlQuery.code, () => {
//       $msg.succ("二次已确认成功");
//       getData()
//     })
//   }, (msg) => {
// $box.open("二次已确认失败", msg)
//   });
// }

const cancelOrderRef = ref("");

function cancelOrder() {
  cancelOrderRef.value.show();
}

function getCancelOrder(data) {
  api.cancel(
    {
      type: "travel",
      code: urlQuery.code,
      // amount: data.amount,
      remark: data.reason,
    },
    () => {
      $msg.succ("取消成功");
      getData();
    }
  );
}

const shipmentsRef = ref("");

function shipments() {
  shipmentsRef.value.show();
}

function getShipments(data) {
  api.shipment(
    "travel",
    {
      orderCode: urlQuery.code,
      expressDetail: data.express,
      // expressName: data.company,
      // expressNo: data.number
    },
    () => {
      $msg.succ("发货成功");
      getData();
    }
  );
}

function confirmAfterSale() {
  confirmAfterSaleRef.value.show();
}

function confirmAfterSaleSubmit(money) {
  afterApi.confirm(data.value.afterSaleItem.afterSaleCode, money, () => {
    $msg.succ("退款成功");
    getData();
  });
}

const cancelAfterSaleRef = ref(null);
const confirmAfterSaleRef = ref(null);
function cancelAfterSale() {
  cancelAfterSaleRef.value.show();
}

function getCancelAfterSale(data) {
  afterApi.cancel(
    {
      afterSaleCode: data.value.afterSaleItem.afterSaleCode,
      remark: data.reason,
    },
    () => {
      $msg.succ("取消成功");
      getData();
    }
  );
}

function confirmTakeOver() {
  $box.alert(
    "确认收货",
    `<div>确定已收到退货商品？</div><div>${data.value.afterSaleItem.expressName}：${data.value.afterSaleItem.expressNo}</div>`,
    () => {
      afterApi.takeOver(data.value.afterSaleItem.afterSaleCode, () => {
        $msg.succ("确定收货成功");
        getData();
      });
    }
  );
}

function back() {
  route.go(-1);
}
</script>

<style lang="scss">
.travel_order_details {
  height: 100%;

  .el-descriptions__cell {
    width: 33%;
  }
}
</style>